import React from 'react'
import { Loader2, Inbox, AlertTriangle } from 'lucide-react'

export function LoadingState({ text = '加载中...' }: { text?: string }): JSX.Element {
  return (
    <div className="state">
      <Loader2 className="spin" size={24} />
      <div className="state-text">{text}</div>
    </div>
  )
}

export function EmptyState({
  title = '暂无数据',
  description,
  action,
}: {
  title?: string
  description?: string
  action?: React.ReactNode
}): JSX.Element {
  return (
    <div className="state">
      <Inbox size={24} />
      <div className="state-title">{title}</div>
      {description && <div className="state-desc muted">{description}</div>}
      {action && <div style={{ marginTop: 8 }}>{action}</div>}
    </div>
  )
}

export function ErrorState({
  message = '加载失败',
  onRetry,
}: {
  message?: string
  onRetry?: () => void
}): JSX.Element {
  return (
    <div className="state">
      <AlertTriangle color="#f87171" size={24} />
      <div className="state-title">出错了</div>
      <div className="state-desc" style={{ color: 'salmon' }}>{message}</div>
      {onRetry && (
        <div style={{ marginTop: 8 }}>
          <button className="btn btn-sm" onClick={onRetry}>重试</button>
        </div>
      )}
    </div>
  )
}

